<div class="po-page-login-popover-container">
  <div class="po-page-login-popover">
    <div class="po-page-login-popover-arrow"></div>
    <div class="po-page-login-popover-content">
      <p class="po-font-text-bold po-page-login-popover-title">
        {{ literals?.titlePopover }}
      </p>
      <p class="po-font-text">
        {{ literals?.forgotYourPassword }}
      </p>
      <p class="po-font-text">
        {{ literals?.ifYouTryHarder }}
        <span class="po-font-text-bold po-page-login-popover-attempts">
          {{ literals?.attempts | poI18n: remainingAttempts }} </span
        >{{ literals?.yourUserWillBeBlocked }}
      </p>
      <br />
      <p class="po-font-text">
        {{ literals?.createANewPasswordNow }}
      </p>
      @if (recovery) {
        <div class="po-font-text-bold po-mt-1 po-page-login-popover-link-container">
          @if (recoveryType === 'internalLink') {
            <a class="po-page-login-popover-link" [routerLink]="recovery">
              {{ literals?.iForgotMyPassword }}
            </a>
          }
          @if (recoveryType === 'externalLink') {
            <a class="po-page-login-popover-link" [href]="recovery" target="_blank">
              {{ literals?.iForgotMyPassword }}
            </a>
          }
          @if (!recoveryType) {
            <a class="po-page-login-popover-link" (click)="onForgotPasswordClick(recovery)">
              {{ literals?.iForgotMyPassword }}
            </a>
          }
        </div>
      }
    </div>
  </div>
</div>
